<!--
 * @Date: 2024-11-21 15:35:50
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2025-02-18 10:46:59
 * @Description: 数据面板
-->
<template>
  <div class="data-board-panel">
    <div class="data-board-body">
      <div class="data-board-left">
        <div class="data-board-icon">
          <RkIcon :name="schema.icon || 'rk-icon-sys-menu'" size="32px"/>
        </div>
      </div>
      <div class="data-board-right">
        <div class="data-board-info">
          <div class="info-item info-label text-over-ellipsis">
            <span>{{ schema.label }}</span>
          </div>
          <div class="info-item info-first text-over-ellipsis">
            <CountRoll
              :value="data[dataKeys.v1] || 0"
              :class="[ eventFuncHook.onClickClass() ]"
              @click="eventFuncHook.onClick(data)"
            />
          </div>
          <div class="info-item info-second text-over-ellipsis">
            <span>{{ data[dataKeys.v2] }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { commonProps } from '@hp/panels/cfg.js'

import { watch, ref, computed, onMounted, nextTick } from 'vue'; 

import { useDbSource } from '@hp/hooks/useDbSource.js'
import { useEventFunc } from '@hp/hooks/useEventFunc.js'

import { RkIcon } from '@/components/rk-icon'
import CountRoll from '@hp/comps/count-roll'

const emits = defineEmits([ 'mounted' ])
const props = defineProps({
  ...commonProps
})

// 数据集
const data = ref({})
// 数据标识
const dataKeys = computed(() => { return props.schema.dataKeys })
// 数据源相关操作
const dbsourceHook = useDbSource({ ...props })
// 事件函数相关操作
const eventFuncHook = useEventFunc({ ...props })

/**
 * 加载数据
 */
const loadData = async () => {
  data.value = {}
  const res = await dbsourceHook.loadDataSource(props.schema)
  data.value = res || {}
}
/**
 * 重新加载面板数据
 * 
 * @param params 额外的参数
 */
const reloadData = async (params = {}) => {
  const res = await dbsourceHook.loadDataSource(props.schema, params = {})
  data.value = res || {}
}
/**
 * 更新数据
 * 
 * @param res 数据信息
 */
const updateData = (res) => {
  data.value = res || {}
}

onMounted(() => {
  nextTick(() => { emits('mounted') })
})
onBeforeMount(async () => {
  await loadData()
})

watch(
  () => props.schema.dataSource,
  (nv, ov) => {
    loadData()
  },
  { deep: true, immediate: false }
)

defineExpose({
  loadData,
  reloadData,
  updateData,
})

</script>

<style lang="scss" scoped>
@use '@hp/panels/base.scss' as *;
.data-board-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  .data-board-body {
    flex: 1;
    min-height: 10px;
    padding: 12px;
    display: flex;
    .data-board-left {
      display: flex;
      align-items: center;
      margin-right: 15px;
      justify-content: center;
    }
    .data-board-right {
      flex: 1;
      display: flex;
      align-items: center;
      padding: 0 8px 0 0;
    }
    .data-board-icon {
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      color: var(--el-color-primary);
      background-color: var(--el-color-primary-light-8);
      img {
        height: 100%;
      }
    }
    .data-board-info {
      width: 100%;
      .info-item  {
        margin-bottom: 6px;
        &:last-child {
          margin-bottom: 0;
        }
      }
      .info-label {
        font-size: 14px;
      }
      .info-first {
        color: #409eff;
        font-size: 26px;
        font-weight: 600;
      }
    }
  }
}
</style>